<template>
  <FormItemWrapper :widget="widget">
    <Textarea  
      ref="textareaRef" 
      v-model:value="widgetProps.value"
      :placeholder="widgetProps.placeholder"
      :disabled="widgetProps.disabled"
      :readonly="widgetProps.readonly"
      :allowClear="widgetProps.allowClear"
      :showCount="widgetProps.showCount"
      :maxlength="widgetProps.maxLength"
      :autoSize="autoSize"
      :bordered="widgetProps.bordered"
    />
  </FormItemWrapper>
 

</template>
<script lang="ts" name="textarea-widget" setup>
import { ref, watch, computed, onMounted, nextTick, provide } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useGlobSetting } from '/@/hooks/setting';
import { useMessage } from '/@/hooks/web/useMessage';
import { Textarea } from 'ant-design-vue'
import { Icon } from '/@/components/Icon';
import FormItemWrapper from './FormItemWrapper.vue'
import { useWidget } from '../useWidget'

const fieldModel = ref('')
const props = defineProps({
  widget: { type: Object, default: {}},
  designerConfig: {
    type: Object,
    default: () => {
      return {
        formTemplates: true,  //是否显示表单模板
      }
    }
  },
})
const widgetProps = props.widget.props
const autoSize = computed(() => {
  const minRows = widgetProps.minRows
  const maxRows = widgetProps.maxRows
  if (widgetProps.minRows || widgetProps.maxRows) {
    return { minRows, maxRows }
  }
  return widgetProps.autoSize
})
watch(
  () => widgetProps.maxLength,
  (val : number) => {
    widgetProps.showCount = val && val > 0
  },
  {
    deep: true, immediate: true
  }
)

const { watchDefaultValue } = useWidget()
watchDefaultValue(props)
provide('designerConfig', props.designerConfig);

</script>

<style lang="less">


</style>
